<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <div class="title">{{ filmInfo.name }}</div>
      <!-- 海报 -->
      <div class="poster">
        <img v-lazy="filmInfo.poster"
             width="100%"
             alt="" />
      </div>
      <div class="desc">
        <div class="name">
          <div>{{ filmInfo.name }}</div>
          <div>{{ filmInfo.grade }}</div>
        </div>
        <div class="category">{{ filmInfo.category }}</div>
        <div class="pireAt">{{ filmInfo.premiereAt | parseTime }}上映</div>
        <div class="nation">{{ filmInfo.nation }}|{{ filmInfo.runtime }}分</div>

        <div class="intro">
          {{ filmInfo.synopsis }}
        </div>
      </div>
    </div>

    <!-- 演职人员 -->
    <div class="actors">
      <div>演职人员</div>
      <div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <!-- 循环演职人员 -->
            <div v-for="item in filmInfo.actors"
                 :key="item.name"
                 class="swiper-slide">
              <img :src="item.avatarAddress"
                   width="85"
                   :alt="item.name" />
              <div>{{ item.name }}</div>
              <div>{{ item.role }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 剧照 -->
    <div class="photos"></div>

    <div class="buyTicket">
      <button>选座购票</button>
    </div>
  </div>
</template>

<script>
// 导入uri
import uri from "@/config/uri";
// 导入moment包
import moment from "moment";
// 导入swiper
import Swiper from "swiper"; //充其量相当于导入了swiper.js文件
// 导入swiper-bundle.min.css
import "swiper/swiper-bundle.min.css";

export default {
  data () {
    return {
      // 默认电影详情为空对象
      filmInfo: {},
    };
  },
  created () {
    // 获取电影id号
    let filmID = this.$route.params.filmID;
    this.$http.get(uri.getDetail + "?filmId=" + filmID).then((res) => {
      this.filmInfo = res.data.film;
      // 演职人员信息只有在接口获取到数据之后才有
      // 定时器可以解决异步渲染的问题（但是不推荐）
      // setTimeout(() => {
      //     new Swiper(".swiper-container", {
      //         // 每页显示4个
      //         slidesPerView: 4,
      //         // 每个之间的间距
      //         spaceBetween: 30,
      //     });
      // }, 1000);
      // vue中nextTick
      this.$nextTick(() => {
        new Swiper(".swiper-container", {
          // 每页显示4个
          slidesPerView: 4,
          // 每个之间的间距
          spaceBetween: 30,
        });
      })
    });
  },
  filters: {
    // 处理时间戳
    parseTime (timestamps) {
      // 语法：moment(时间戳).format(格式化)
      return moment(timestamps * 1000).format("YYYY-MM-DD");
    },
  },
};
</script>

<style scoped></style>
